<template>
    <div class="container-fluid">
        <div class="row mb-1">
            <div class="col">
                <el-button @click="delall" type="danger" :disabled="!selectdata.length">删除</el-button>
                <el-button @click="updateall('state', 1)" type="primary" :disabled="!selectdata.length">通过</el-button>
                <el-button @click="updateall('state', 0)" type="warning" :disabled="!selectdata.length">不通过</el-button>
                <!-- <el-button @click="updateall('top', 1)">置顶</el-button> -->
                <!-- <el-button @click="updateall('top', null)">取消置顶</el-button> -->
            </div>
            <div class="col-3">
                <el-select v-model="objs.state" clearable placeholder="是否通过">
                    <el-option label="通过" :value="1" />
                    <el-option label="未通过" :value="0" />
                    <el-option label="未审核" :value="2" />
                </el-select>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col">
                <el-table border default-expand-all ref="table" :data="tableData" style="width: 100%" height="65vh"
                    @sort-change="sortchange" @selection-change="handleSelectionChange">
                    <el-table-column type="expand">
                        <template #default="props">
                            <div :style="{ padding: '0px 64px' }">

                                <div v-html="props.row.context" class="editor-content-view">

                                </div>
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column type="selection" width="55" />
                    <el-table-column sortable prop="ID" label="ID" width="120" />
                    <el-table-column prop="user.name" label="用户" width="120" />
                    <el-table-column prop="question.name" label="题目名称" />
                    <el-table-column sortable prop="question.ID" label="题单ID" width="120" />
                    <el-table-column prop="top" label="是否置顶" width="120" />
                    <el-table-column sortable prop="state" label="是否通过" width="120">
                        <template #default="props">
                            <div>
                                {{ ['不通过', '通过', '未审核'][props.row.state] }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createdAt" sortable label="提交时间" :formatter="(e) => TimeYH(e.createdAt)"
                        width="160" />
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-button type="info" @click="
                                dialogVisible = true;
                            updatedata = scope.row;
                            ">
                                查看
                            </el-button>
                            <el-button type="danger" @click="del(scope.row.ID)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog width="800px" destroy-on-close title="查看" v-model="dialogVisible">
                    <el-row>
                        <el-col :span="16">
                            <el-form :model="updatedata" label-width="85px">
                                <el-form-item label="题目:">
                                    <el-link target="_blank"
                                        :href="`https://www.hterobot.com/home.html#/course/${updatedata.questionid}?lession=0`">
                                        {{ updatedata.questionid }} - {{ updatedata.question?.name }}
                                    </el-link>
                                </el-form-item>
                                <el-form-item v-show="updatedata.createdAt" label="提交时间:">
                                    {{ TimeYH(updatedata.createdAt) }}
                                </el-form-item>
                                <el-form-item label="提交内容:">
                                    <div v-html="updatedata.context" class="editor-content-view"></div>
                                </el-form-item>
                                <el-form-item label="是否置顶">
                                    <el-radio-group v-model="updatedata.top" class="ml-4">
                                        <el-radio :label="1">置顶</el-radio>
                                        <el-radio :label="0">不置顶</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="审核状态">
                                    <el-radio-group v-model="updatedata.state" class="ml-4">
                                        <el-radio :label="1">通过</el-radio>
                                        <el-radio :label="0" :disabled="!updatedata.examine">不通过</el-radio>
                                    </el-radio-group>
                                    <el-select v-model="updatedata.examine">
                                        <el-option label="灌水" value="灌水" />
                                        <el-option label="请在“贡献题解”板块完善思路录入题解" value="请在“贡献题解”板块完善思路录入题解" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="保存">
                                    <el-button @click="updateprompt(updatedata)">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="8">
                            <div>给用户回复消息，并且自动通过</div>
                            <el-input autosize type="textarea" v-model="mytextarea.context"></el-input>
                            <el-button @click="updateprompt(assign(updatedata, { state: 1 }), true)">回复</el-button>
                        </el-col>
                    </el-row>

                    <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";

import {
    asyncadmingetfabulouscomment,
    asyncadmindelfabulouscomment,
    asyncaadminupdatefabulouscomment,
    Iobj,
    asyncadmincreatequestioncomment,
} from "../../../api/index";

import Studycodemodel from "../../../mysql_interface/studycodemodel";

import { ElMessage, ElMessageBox } from "element-plus";

import { TimeYH } from "../../../util/time";
import { assign } from 'lodash-es';
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
const p = defineProps<{ obj: Iobj<Studycodemodel.Iquestioncomment>, setcount: (n: number) => void, changeobj: (a: any) => void }>()

const e = defineEmits<{
    (event: 'change'): void
    (event: 'update:obj', obj: Iobj<Studycodemodel.Iquestioncomment>): void
}>()

const isuse = ["未处理", "已通过", "未通过"];

const dialogVisible = ref(false);

const IID = ref(0);

const tableData = ref<Studycodemodel.Iquestioncomment[]>([]);

const updatedata = ref<Studycodemodel.Iquestioncomment>({})

const mytextarea = reactive<Studycodemodel.Iquestioncomment>({})

async function update() {
    await asyncaadminupdatefabulouscomment(updatedata.value)
    ElMessage.success('修改成功')
    dialogVisible.value = false
}

async function start() {
    const obj = {
        ...p.obj,
        ...objs,
    }
    if (obj.state === '') {
        delete obj.state
    }

    const data = await asyncadmingetfabulouscomment(obj);
    tableData.value = data.rows;
    p.setcount(data.count)
}

const table = ref()

onMounted(() => {
    start();
});

const selectdata = ref<Studycodemodel.Iquestioncomment[]>([])
function handleSelectionChange(data: Studycodemodel.Iquestioncomment[]) {
    selectdata.value = data
}

async function next1() {
    await start();
    const data = tableData.value[0]
    if (data) {
        updatedata.value = data
    } else {
        dialogVisible.value = false
    }
}
const store = useStore(Storekey)

async function updateprompt(row: Studycodemodel.Iquestioncomment, ishuifu?: boolean) {
    await asyncaadminupdatefabulouscomment(row)
    if (ishuifu) {
        await create(assign({}, mytextarea, {
            questionid: row.questionid,
            pid: row.ID,
            userid: store.state.user?.ID,
            state: 1,
        }))
    }
    next1()
}

async function create(row: Studycodemodel.Iquestioncomment) {
    await asyncadmincreatequestioncomment(row)
}




const objs = reactive<Iobj<Studycodemodel.Iquestioncomment>>({
    _order: 'ID',
    _sortable: "DESC",
    state: 2
})

watch(p.obj, start)
watch(objs, start)

function del(ID: number) {
    ElMessageBox.confirm("确定要删除次评论", "确定", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    })
        .then(async () => {
            await asyncadmindelfabulouscomment({ ID });
            ElMessage.success("删除成功");
            start();
        })
        .catch((e: any) => {
            console.log(e);
        });
}

function sortchange(row: { order: string; prop: any }) {
    const { prop } = row;
    console.log(123654)
    if (row.order == "descending") {
        objs._order = prop;
        objs._sortable = "ASC"
    } else {
        objs._order = prop;
        objs._sortable = "DESC"
    }
}


function delall() {
    const data = selectdata.value
    const v = data.map(e => {
        return asyncadmindelfabulouscomment({ ID: e.ID })
    })
    Promise.all(v).then(start)

}

function updateall(key: string, value: number) {
    const data = selectdata.value
    const v = data.map(e => {
        const data = {
            ID: e.ID,
            [key]: value
        }
        return asyncaadminupdatefabulouscomment(data)
    })
    Promise.all(v).then(start)
}


</script>
